<template>
	<view class="container">
		<!-- <view class="bar-search-scan">
			<uni-notice-bar show-icon single class="bar" background-color="transparent"
				text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</view> -->
		<view class="search">
			<view class="input">
				<!-- <image src="../../static/fuel/fuel-search.png" mode=""></image> -->
				<uni-search-bar style="width: 100%;padding: 0px;" radius=20 bgColor='white' :focus="false"
					v-model="searchValue" placeholder="请输入油站名称" @input="searchInput" @confirm="searchConfirm"
					cancelButton="none" clearButton='none'>
				</uni-search-bar>
			</view>
			<view class="seitch-charge" @click="cutChange()">
				<image class="put-image" src="http://wx.xiongmaovip.com/miniapp/static/fuel/qiehuan.png" mode=""></image>
				<text>切换充电</text>
			</view>
		</view>
		<view class="advertisement">
			<!-- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content"> -->
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay circular>
				<swiper-item v-for="(item, index) in info" :key="item.id">
					<view class="swiper-item">
						<image v-if="info.length>0" :src="item.imgUrl" mode=""></image>
						<text v-else style="color: #fff; font-size: 32px;"></text>
					</view>
				</swiper-item>
			</swiper>
			<!-- </uni-swiper-dot> -->
		</view>
		<view class="product-list">
			<view class="title">
				<view class="title-left">
					全部
				</view>
				<view class="bar">

				</view>
				<!-- <view class="seitch-charge" @click="cutChange()">
					切换充电
				</view>
				<view class="title-right">
					<text>|</text>
					<view class="pr" @click="prtoggle('bottom')">
						95#
					</view>
					<view class="filter" @click="toggle('bottom')">
						综合
					</view>
				</view> -->
			</view>
			<view class="list">
				<view class="list-item" v-for="(item,index) in stationDataList" :key="item.stationId"
					@click="nextFuel(item)">
					<view class="item-top">
						<view class="name">
							<image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-list-logo.png" mode=""></image>
							{{item.stationName}}
						</view>
						<view class="position" @click="gohere(item)">
							<image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-list-pos.png" mode=""></image>
							{{item.distance}}km
						</view>
					</view>
					<view class="position-name">
						{{item.address || '四川省成都市高新区盛和三路230号'}}
					</view>
					<view class="preferential">
						<view class="preferential-name">
							加油合作油站
						</view>
						<view class="preferential-price">
							优惠价：<text>￥</text> <text>{{nozList[index].price}}</text> <text
								style="color: #2d2b2a;font-size: 26rpx;">/L起</text>
						</view>
					</view>
				</view>
				<!-- <view class="list-item" @click="nextFuel">
					<view class="item-top">
						<view class="name">
							元华加油站
						</view>
						<view class="position">
							1.9km
						</view>
					</view>
					<view class="position-name">
						四川省成都市高新区盛和三路188号
					</view>
					<view class="preferential">
						<view class="preferential-name">
							加油合作油站
						</view>
						<view class="preferential-price">
							优惠价￥:8.34
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup1" background-color="#fff" @change="change1">
			<view class="popup-content">
				<view class="pr-list">
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
					<view class="item">
						#92
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 综合弹出层 -->
		<uni-popup ref="popup" background-color="#fff" @change="change2">
			<view class="popup-comprehensive">
				<view class="comprehensive">
					<view class="item">
						综合排序
					</view>
					<view class="item">
						距离最近
					</view>
					<view class="item">
						价格从高到低
					</view>
				</view>
			</view>
		</uni-popup>
		<custom-tabbar :isShow='isShow' />
	</view>
</template>

<script>
	import {
		getListFuelStation
	} from '@/api/index'
	import customTabbar from '@/components/custom-tabbar.vue'
	import {
		fuelListAdv,
		getCode
	} from '@/api/index.js'
	import location from '@/utils/getLocation.js'
	export default {
		components: {
			customTabbar
		},
		data() {
			return {
				// current: 0,
				mode: '',
				isShow: false,
				dotsStyles: {},
				searchValue: '',
				swiperDotIndex: 0,
				info: [],
				stationDataList: [],
				lng: '',
				lat: '',
				nozList: []
			};
		},
		onReady() {
			this.getLocation()
		},
		onShow() {
			uni.setStorageSync('FUELORCHARGE', 1)
		},
		onLoad() {
			this.getfuelListAdv()
		},
		onPullDownRefresh() {
			this.info = []
			this.stationDataList = []
			this.getListFuelStationFn();
			this.getfuelListAdv()
		},
		methods: {
			getLocation() {
				const _self = this;
				location().then(res => {
					_self.lng = res.longitude
					_self.lat = res.latitude
					_self.getListFuelStationFn();
				}).catch(err => {
					if (!err) {
						_self.getListFuelStationFn();
					}
				})
			},
			getCodeData() {
				getCode().then(res => {
					if (res.token) {
						// this.getListFuelStationFn();
						this.getfuelListAdv()
					}
				})
			},
			getfuelListAdv() {
				fuelListAdv({}).then(res => {
					this.getListFuelStationFn()
					if (res.length > 0) {
						this.swiperDotIndex = 0
						this.info = res
						return
					}
					this.info = []
				}).catch(error => {
					if (error == 'token已过期.'|| error=='token找不到了.') {
						this.getCodeData()
					}
				})
			},
			// 获取站点列表
			getListFuelStationFn() {
				getListFuelStation({
					lng: this.lng || 104.04311,
					lat: this.lat || 30.64242,
					distance: 9999,
					stationName: this.searchValue || ''
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res && res.length) {
						this.stationDataList = res
						this.stationDataList.forEach(item => {
							if (item.nozList.length > 0) {
								let res = item.nozList.find(this.checkAdult)
								this.nozList.push(res)
							}
						})
					} else {
						console.log(res, 'error')
					}
				}).catch(error => {
					if (error == 'token已过期.'|| error=='token找不到了.') {
						// this.getCodeData()
					}
				})
			},
			checkAdult(data) {
				return data.prName == '92#';
			},
			change1(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			change2(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			prtoggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			cutChange() {
				uni.switchTab({
					url: '/pages/panda-charge/index'
				})
				uni.setStorageSync('FUELORCHARGE', 2)
			},
			nextFuel(data) {
				uni.navigateTo({
					url: './check-order/index?stationId=' + data.stationId + '&lat=' + this.lat + '&lng=' + this
						.lng
				})
			},
			searchConfirm(e) {
				console.log(e)
			},
			searchInput(e) {
				console.log(e)
				this.searchValue = e
				this.getListFuelStationFn()
			},
			//打开地图
			gohere(data) {
				if (this.lng && this.lat) {
					uni.openLocation({
						latitude: data.lat,
						longitude: data.lng,
						name: data.stationName,
						address: data.address
					})
					return
				}
				this.getLocation()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx 100rpx 30rpx;
		background: url("https://i.postimg.cc/sX8QCXKp/fuel-bg.png") no-repeat;
		background-size: 100%;

		.bar-search-scan {
			.bar {
				width: 100%;
				height: 64rpx;

				.uni-noticebar {
					height: 64rpx;
				}
			}
		}

		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 80rpx;
			padding: 0px;

			.input {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin: 0px 16rpx 0rpx 24rpx;
				}

				width: 470rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				input {
					height: 80rpx;
				}
			}

			.seitch-charge {
				background: url("http://wx.xiongmaovip.com/miniapp/static/fuel/qiehuan-bg.png") center no-repeat;
				width: 200rpx;
				height: 80rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				.put-image {
					width: 28rpx;
					height: 25rpx;
					margin: 26rpx 24rpx;
				}

				text {
					font-size: 28rpx;
					color: #ffffff;
					display: inline-block;
				}

				// font-size: 24rpx;
				// border: 1px solid #99a7a1;
				// border-radius: 24rpx;
				// padding: 8rpx 20rpx;
			}
		}

		.advertisement {
			padding: 24rpx 0rpx 40rpx 0rpx;

			.swiper-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 320rpx;
				color: #fff;
				border-radius: 20rpx;
				background-color: #ffffff;
			}

			.image {
				width: 750rpx;
			}

			.swiper-box {
				height: 320rpx;
				width: 100%;
				border-radius: 16rpx;
			}
		}

		.product-list {
			.title {
				width: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title-left {
					font-size: 30rpx;
					font-weight: 500;
					color: #e56646;
					line-height: 42rpx;
				}

				.bar {
					text-align: center;
					width: 32rpx;
					height: 4rpx;
					background: #e56646;
				}
			}

			.list {
				padding: 24rpx 0rpx 20rpx 0rpx;

				.list-item {
					padding: 32rpx 32rpx;
					background: #ffffff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-bottom: 24rpx;

					.item-top {
						display: flex;
						justify-content: space-between;

						.name {
							image {
								width: 32rpx;
								height: 28rpx;
							}

							font-size: 34rpx;
							font-weight: 500;
							color: #2d2b2a;
							line-height: 48rpx;
						}

						.position {
							image {
								width: 20rpx;
								height: 20rpx;
							}

							font-size: 26rpx;
							font-weight: 500;
							color: #2d2b2a;
							line-height: 36rpx;
						}
					}

					.position-name {
						font-size: 26rpx;
						color: #939391;
						line-height: 36rpx;
						margin: 8rpx 0rpx 24rpx 0px;
					}

					.preferential {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.preferential-name {
							padding: 4rpx 10rpx;
							color: #99a7a1;
							font-size: 26rpx;
							background: #f3f5f7;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}

						.preferential-price {
							font-size: 26rpx;
							color: #2d2b2a;
							line-height: 36rpx;

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #e56646;
								line-height: 40rpx;
							}

							text:nth-child(2) {
								font-size: 44rpx;
							}
						}
					}
				}
			}
		}

		.popup-content {
			align-items: center;
			justify-content: center;
			padding: 15px;
			// height: 50px;
			background-color: #fff;

			.pr-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 200rpx;
					line-height: 100rpx;
					background-color: #99a7a1;
					border-radius: 18rpx;
					margin-bottom: 20rpx;
					text-align: center;
					color: white;
				}
			}
		}

		.popup-comprehensive {
			padding: 40rpx 20rpx 170rpx 20rpx;

			.comprehensive {
				display: flex;
				justify-content: space-between;

				.item {
					padding: 15rpx 35rpx;
					background-color: #d1e3dc;
					border-radius: 36rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>